<style>
    .time {
        font-size: 14px;
        font-weight: bold;
    }

    .content {
        padding-left: 5px;
    }
</style>
<template>
    <span>
    <Button @click="showDrawer" type="success" size="small">详情</Button>
    <Drawer title="员工信息" :closable="false" placement="right" v-model="drawerVisible">
        <TimelineItem v-for="item in user">
            <p class="time">基本信息</p>
            <p class="content">姓名：{{item.userName}}</p>
            <p class="content" v-if="item.sex==1">性别：女</p>
            <p class="content" v-else >性别：男</p>
            <p class="content">邮箱：{{item.email}}</p>
            <p class="content">手机号：{{item.mobile}}</p>
            <p class="content">年龄：{{item.age}}</p>
            <p class="content">地址：{{item.address}}</p>
            <!--<p class="content">部门：{{item.departmentName}}</p>-->
        </TimelineItem>
        <Timeline>
        <TimelineItem v-for="item in eduList">
            <p class="time">教育经历</p>
            <p class="content">学校名称：{{item.schoolName}}</p>
            <p class="content">学历：{{item.education}}</p>
            <p class="content">专业：{{item.major}}</p>
            <p class="content">证书编号：{{item.certificateNo}}</p>
            <p class="content">职称：{{item.academicTitle}}</p>
            <p class="content" v-if="item.isEducation==1" style="color: #52c41a">已认证</p>
            <p class="content" v-else style="color: red">未认证</p>
            <br>
            <Button v-if="item.isEducation == 2" type="primary" @click="checkEdu(item.id)">学历认证</Button>
        </TimelineItem>
       <TimelineItem v-for="item in workcourseList">
            <p class="time">工作经历</p>
            <p class="content">公司名称：{{item.companyName}}</p>
            <p class="content">工作年限：{{item.workingLife.text}}</p>
            <p class="content">职位：{{item.position}}</p>
            <p class="content">工作描述：{{item.workTask}}</p>
            <p class="content" v-if="item.isWork == 1" style="color: #52c41a">已认证</p>
            <p class="content" v-else style="color: red">未认证</p>
            <br>
            <Button v-if="item.isWork == 2" type="primary" @click="checkWork(item.id)">工作认证</Button>
        </TimelineItem>
    </Timeline>
    </Drawer>
    </span>
</template>
<script>
    import {staffDetail,checkUserWork,checkUserEdu} from "@/api/bus";

    export default {
        name: "staffDetail",
        props: {
            id: ""
        },
        data() {
            return {
                drawerVisible:false,
                workcourseList: [],
                eduList: [],
                user: {}
            }
        },
        methods: {
            //加载数据
            showDrawer() {
                this.type = 1;
                this.drawerTitle = "详情";
                this.drawerVisible = true;
                this.getData();

            },
            getaaa(a){
                alert(a.code);
            },
            checkWork(id){
                checkUserWork(id).then(res => {
                    if (res.status === true) {
                        this.$Message.success("认证成功");
                        this.$parent.refreshTable();
                        this.drawerVisible = true;
                    }
                });
            },
            checkEdu(id){
                checkUserEdu(id).then(res => {
                    if (res.status === true) {
                        this.$Message.success("认证成功");
                        this.$parent.refreshTable();
                        this.drawerVisible = true;
                    }
                });
            },
            getData() {
                this.loading = true;
                staffDetail(this.id).then(res => {
                    this.loading = false;
                    if (res.status === true) {
                        this.workcourseList = res.data.work;
                        this.user = res.data.staff;
                        this.eduList = res.data.education;
                        //console.info(JSON.stringify(this.workcourseList));
                    }
                });
            }

        }
    }
</script>